<template>
	<view class="content">
		<view class="user_info_wrap">
			<view class="text">首页</view>
			<view class="sarch">
				<u-search :showAction="false" placeholder="搜索商品" shape="square" v-model="fromData.name" @search="refresh({
					page: 1
				})" style="width: 100%;"></u-search>
			</view>
			<view style="color: rgba(3, 185, 209, 1);white-space: nowrap;" @click="renew()">更新</view>
		</view>
		<view>
			<swiper class="swiper" circular indicator-dots indicator-color="#FFFFFF" indicator-active-color="#805332"
				autoplay :interval="10000" :duration="500">
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/index1.png" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/index2.png" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<image src="/static/index3.png" style="width: 100%;height: 100%;"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="category">
			<view class="category_header">
				<u--image src="../../static/home/home1.png" width="134rpx" height="46rpx"></u--image>
			</view>
			<view class="goodsBox">
				<scroll-list ref="list" :option="option" @load="load" @refresh="refresh">
					<view class="goods">
						<view class="goods-item" v-for="(item,index) in goodsData" :key="index">
							<view class="tupian">
								<image :src="item.img" style="width: 100%;height: 100%;"></image>
							</view>
							<view class="goods-item-text">{{item.name}}</view>
							<view class="goods-box">
								<view class="box-let">
									<view class="box-let-text"><span style="font-size: 20rpx;
font-weight: 500;">￥</span>{{item.money}}</view>
									<view class="kucun">库存：{{item.quantity}}</view>
								</view>
								<view class="box-right">
									<view class="count">
										<text class="textLeft"
											@click="$u.throttle(() => {valChange('减', item.spec_type, item.id, item.goods_rule_id, index) }, 500)">-</text>
										<input class="input" type="number" :value="item.num"
											@blur="spacTypeBlur($event,item.spec_type, item.id, item.goods_rule_id,index)" />
										<text class="textRight"
											@click="$u.throttle(() => {valChange('加', item.spec_type, item.id, item.goods_rule_id, index) }, 500)">+</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-list>
			</view>
		</view>
		<u-popup :show="show" @close="close" :round="20">
			<view class="popup-box">
				<view class="box-header">
					<view class="yuan"></view>
					<view class="text">规格选择</view>
				</view>
				<view style="margin: 40rpx;" v-if="ruleList.length == 0">暂无规格!</view>
				<view class="box" v-for="(val, index) in ruleList" :key="index">
					<view style="display: inline-block;">{{val.spec_name}}<span
							style="margin-left: 30rpx;color: rgba(3, 185, 209, 1);">￥{{val.money}}</span></view>
					<view class="box-righted">
						<view class="count">
							<text class="textLeft"
								@click="$u.throttle(() => {valChangePopup('减', val.id, index)}, 500)">-</text>
							<input class="input" type="number" :value="val.num"
								@blur="spacTypeBlurPopup($event, val.id, index)" />
							<text class="textRight"
								@click="$u.throttle(() => {valChangePopup('加', val.id, index)}, 500)">+</text>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>
<script>
	import {
		goodsList,
		goodsRule,
		cartCreate
	} from "@/api/home.js"
	export default {
		data() {
			return {
				show: false,
				goodsData: [],
				option: {
					page: 1,
					limit: 10,
					auto: false,
					height: null
				},
				fromData: {
					page: 1,
					limit: 10,
					name: ''
				},
				list1: [
					'/static/index1.png',
					'/static/index2.png',
					'/static/index3.png',
				],
				ruleList: []
			}
		},
		onShow() {
			this.goodsData = []
			this.refresh({
				page: 1
			})
		},
		mounted() {
			const query = uni.createSelectorQuery().in(this);
			query.select('.goodsBox').boundingClientRect(data => {
				this.option.height = data.height
			}).exec();
		},
		methods: {
			close() {
				this.show = false
			},
			// 规格判断
			valChange(event, customValue, id, goods_rule_id, index) {
				if (customValue == 2) {
					this.getGoodsRule(id)
					this.show = true
				} else {
					this.getCartCreate(event, goods_rule_id, index)
					this.show = false
				}
			},
			// input判断
			spacTypeBlur(event, customValue, id, goods_rule_id, index) {
				if (customValue == 2) {
					this.getGoodsRule(id)
					this.show = true
				} else {
					this.getCartCreateIput(event.detail.value, goods_rule_id, index)
					this.show = false
				}
			},
			// input加
			getCartCreateIput(quantity, id, index) {
				if (quantity <= 0) {
					uni.$u.toast('请填写正确商品数量!')
					return
				}
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 2
				}
				cartCreate(parm)
					.then(res => {
						this.goodsData[index].num = quantity
						uni.$u.toast(res.msg)
					})
			},
			// 加减
			getCartCreate(value, id, index) {
				if (value == '加') {
					this.goodsData[index].num++
				} else {
					if (this.goodsData[index].num > 0) {
						this.goodsData[index].num--
					} else {
						uni.$u.toast('数量为0,不能减少了!')
						return
					}
				}
				const quantity = value == '加' ? '1' : '-1'
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 1
				}
				cartCreate(parm)
					.then(res => {
						uni.$u.toast(res.msg)
					})
			},
			// 多规格
			valChangePopup(event, id, index) {
				this.getCartCreatePopup(event, id, index)
			},
			// 多规格加减
			getCartCreatePopup(value, id, index) {
				if (value == '加') {
					this.ruleList[index].num++
				} else if (this.ruleList[index].num == 0) {
					uni.$u.toast('数量为0,不能减少了!')
					return
				} else {
					if (this.ruleList[index].num > 0) {
						this.ruleList[index].num--
					}
				}
				const quantity = value == '加' ? '1' : '-1'
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 1
				}
				cartCreate(parm)
					.then(res => {
						uni.$u.toast(res.msg)
					})
			},
			// 多规格 input 
			spacTypeBlurPopup(event, id, index) {
				this.getCartCreateIputPopup(event.detail.value, id, index)
			},
			// 多规格 input加
			getCartCreateIputPopup(quantity, id, index) {
				if (quantity <= 0) {
					uni.$u.toast('请填写正确商品数量!')
					return
				}
				const parm = {
					goods_rule_id: id,
					quantity: quantity,
					is_input: 2
				}
				cartCreate(parm)
					.then(res => {
						this.ruleList[index].num = quantity
						uni.$u.toast(res.msg)
					})
			},
			// 多规格数据
			getGoodsRule(id) {
				const parm = {
					goods_id: id
				}
				goodsRule(parm)
					.then(res => {
						this.ruleList = res.data.map((res) => {
							return {
								...res,
								num: 0
							}
						})
					})
			},

			// 更新
			renew() {
				this.fromData.name = ""
				this.goodsData = []
				this.search()
			},
			load(paging) {
				this.fromData.page = paging.page
				this.search()
			},
			refresh(paging) {
				this.fromData.page = paging.page
				let params = {
					...this.fromData
				}
				goodsList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								num: 0
							}
						})
						this.goodsData = [...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.refreshSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.refreshFail()
					})
			},
			search() {
				let params = {
					...this.fromData
				}
				goodsList(params)
					.then(res => {
						let list = [...res.data.list].map((res) => {
							return {
								...res,
								num: 0
							}
						})
						this.goodsData = [...this.goodsData, ...list]
						// 加载成功  参数对象{list: 当前列表,total: 数据总长度(后端查询的total)}
						this.$refs.list.loadSuccess({
							list: this.goodsData,
							total: res.data.count
						})
					})
					.catch(err => {
						this.$refs.list.loadFail()
					})
			}
		}
	}
</script>
<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		padding: 60rpx 30rpx;
		box-sizing: border-box;

		.user_info_wrap {
			display: flex;
			align-items: center;
			justify-content: space-between;
			gap: 30rpx;
			width: 100%;
			height: 82rpx;
			font-size: 32rpx;

			.text {
				font-size: 32rpx;
				font-weight: 400;
				white-space: nowrap;
				color: rgba(37, 38, 38, 1);
			}

			.sarch {
				flex: auto;
			}
		}

		.swiper {
			width: 100%;
			height: 280rpx;
			border-radius: 12rpx;
			overflow: hidden;
			margin-top: 40rpx;

			.swiper-item {
				width: 100%;
				height: inherit;
			}
		}

		.category {
			width: 100%;

			.category_header {
				width: 134rpx;
				height: 46rpx;
				margin: 30rpx 0;
			}

			.goodsBox {
				width: 100%;
				height: calc(100vh - 650rpx);
				overflow-y: scroll;
				padding-top: 20rpx;

				.goods {
					.goods-item {
						margin: 6rpx;
						box-sizing: border-box;
						font-size: 28rpx;
						background: #fff;
						padding-bottom: 30rpx;
						position: relative;

						.tupian {
							width: 690rpx;
							height: 320rpx;
						}

						.goods-item-text {
							margin: 20rpx 0rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(37, 38, 38, 1);
						}

						.goods-box {
							display: flex;
							justify-content: flex-end;

							.box-let {
								.box-let-text {
									font-size: 32rpx;
									font-weight: 700;
									color: rgba(3, 185, 209, 1);
								}

								.kucun {
									margin-top: 20rpx;
									font-size: 20rpx;
									font-weight: 500;
									color: rgba(145, 144, 144, 1);
								}
							}

							.box-right {
								margin-left: auto;


								// 商品数量
								.count {
									position: absolute;
									bottom: 25rpx;
									right: 5rpx;

									display: flex;
									justify-content: center;
									align-items: center;
									width: 220rpx;
									height: 48rpx;

									.textLeft {
										font-size: 40rpx;
										width: 44rpx;
										height: 44rpx;
										border-width: 2rpx;
										border-color: #E6E6E6;
										border-style: solid;
										border-radius: 50%;
										text-align: center;
										line-height: 40rpx;
									}

									.input {
										width: 132rpx;
										height: 100%;
										text-align: center;
										border-radius: 4rpx;
										font-size: 24rpx;
										color: #444;
									}

									.textRight {
										font-size: 40rpx;
										width: 44rpx;
										height: 44rpx;
										background-color: rgba(3, 185, 209, 1);
										color: #fff;
										border-radius: 50%;
										text-align: center;
										line-height: 40rpx;
									}
								}
							}
						}
					}
				}
			}
		}

		.popup-box {
			width: 100%;
			border-radius: 28rpx 28rpx 0rpx 0rpx;
			background: rgba(255, 255, 255, 1);
			padding: 30rpx;
			box-sizing: border-box;


			.box-header {
				position: relative;

				.yuan {
					position: absolute;
					top: -5rpx;
					left: -5rpx;
					width: 24rpx;
					height: 24rpx;
					border-radius: 50%;
					background: rgba(3, 185, 209, 0.3);
				}

				.text {
					font-size: 28rpx;
					font-weight: 700;
					color: rgba(37, 38, 38, 1);
				}
			}

			.box {
				display: flex;
				justify-content: space-between;
				margin: 40rpx 0rpx;
				position: relative;

				.box-righted {
					display: inline-block;

					// 商品数量
					.count {
						position: absolute;
						bottom: 0rpx;
						right: 5rpx;

						display: flex;
						justify-content: center;
						align-items: center;
						width: 220rpx;
						height: 48rpx;

						.textLeft {
							font-size: 40rpx;
							width: 44rpx;
							height: 44rpx;
							border-width: 2rpx;
							border-color: #E6E6E6;
							border-style: solid;
							border-radius: 50%;
							text-align: center;
							line-height: 40rpx;
						}

						.input {
							width: 132rpx;
							height: 100%;
							text-align: center;
							border-radius: 4rpx;
							font-size: 24rpx;
							color: #444;
						}

						.textRight {
							font-size: 40rpx;
							width: 44rpx;
							height: 44rpx;
							background-color: rgba(3, 185, 209, 1);
							color: #fff;
							border-radius: 50%;
							text-align: center;
							line-height: 40rpx;
						}
					}
				}
			}

		}
	}
</style>